<!--
	form-clearbtn
	clear all value
-->

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>bddomo</title>
	<link rel="stylesheet" href="bddemo.css">
</head>
<body>
	<div class="container">
		<form action="#" id="veri-form" class="data">
			<div id="veri-username-wrapper" class="form-item form-item-username">
				<label for="veri-username" class="form-label">用户名</label>
				<input type="text" id="veri-username" class="form-text-input" data-dr="username" placeholder="请设置用户名">
				<span style="display: none; visibility: hidden; opacity: 1;" class="form-clearbtn"></span>
				<span class="form-error form-error-username"></span>
				<span style="display: none" class="form-succ"></span>
				<span style="display: none;" class="form-tip">
					<span class="form-tiptext form-tiptext-username">
						设置后不可更改<br>中英文均可，最长14个英文或7个汉字
					</span>
				</span>
			</div>
			<div id="veri-phone-wrapper" class="form-item form-item-phone">
				<label for="veri-phone" class="form-label">手机号</label>
				<input type="text" maxlength="11" id="veri-phone" class="form-text-input" data-dr="phone" placeholder="可用于登录和找回密码">
				<span style="display: none; visibility: hidden; opacity: 1;" class="form-clearbtn"></span>
				<span class="form-error form-error-phone"></span>
				<span style="display: none" class="form-succ"></span>
				<span style="display: none;" class="form-tip">
					<span class="form-tiptext form-tiptext-phone">请输入中国大陆手机号，其他用户不可见</span>
				</span>
			</div>
			<div id="veri-password-wrapper" class="form-item form-item-password">
				<label for="veri-password" class="form-label">密码</label>
				<input type="password" id="veri-password" class="form-text-input" data-dr="password" data-input="input-password" placeholder="请设置登录密码">
				<span style="display: none; visibility: hidden; opacity: 1;" class="form-clearbtn"></span>
				<span class="form-error form-error-password">
					<span class="pwd-strength">
						<span class="pwd-strength-sum">
							<em class="pwd-strength-bg"></em>
							<em class="pwd-strength-sco"></em>
							<span class="pwd-strength-title"></span>
						</span>
						<span class="pwd-strength-detail"></span>
					</span>
				</span>
				<span style="display: none" class="form-succ"></span>
				<span style="display: none;" class="form-tip form-tip-password">
					<span class="form-tiptext form-tiptext-password">
						<div class="pwd-checklist-wrapper">
							<span class="pwd-checklist-arrow">
								<em class="arrowa">◆</em>
								<em class="arrowb">◆</em>
							</span>
							<ul class="pwd-checklist">
								<li class="pwd-checklist-item">长度为6~14个字符</li>
								<li class="pwd-checklist-item">支持数字、大小写字母和标点符号</li>
								<li class="pwd-checklist-item">不允许有空格</li>
							</ul>
						</div>
					</span>
				</span>
			</div>
			<div id="veri-verifyCode-wrapper" class="form-item form-item-verifyCode">
				<label for="veri-verifyCode" class="form-label">验证码</label>
				<input type="text" maxlength="4" id="veri-verifyCode" class="form-text-input form-text-input-verifyCode" data-dr="verifyCode" placeholder="请输入验证码">
				<span style="display: none; visibility: hidden; opacity: 1;" class="form-clearbtn form-clearbtn-verifyCode"></span>
				<input type="button" id="veri-verifyCodeSend" class="form-button form-button-verifyCodeSend" value="获取短信验证码">
				<span class="form-error form-error-verifyCode"></span>
				<span style="display: none" class="form-succ"></span>
				<span style="display: none;" class="form-tip form-tip-verifyCodeSend">
					<span class="form-tiptext form-tiptext-verifyCode">
						短信激活码已发送,请您在30分钟内填写。<a href="#">无法获取？</a>
					</span>
				</span>
			</div>
			<div id="veri-isAgree-wrapper" class="form-item form-item-isAgree">
				<input type="checkbox" id="veri-isAgree" class="form-checkbox-isAgree" data-dr="isAgree">
				<label for="veri-isAgree">阅读并接受</label>
				<a href="#">《xx用户协议》</a>及
				<a href="#">《xx隐私权保护声明》</a>
				<a>
					<span class="form-error form-error-isAgree"></span>
				</a>
			</div>
			<div id="veri-submit-wrapper" class="form-item form-item-submit">
				<a>
					<input type="submit" id="veri-submit" class="form-button form-button-submit" value="注册">
				</a>
			</div>
		</form>
	</div>
	<script src="../../../../../../usually/js/jQuery/jquery-1.11.3.min.js"></script>
	<script src="bdverify.js"></script>
	<script>
		$( function() {
			// var detail = "您的密码很安全,请牢记！",
			// 	title = "强"
			// $(".form-error").css({"display": "inline"}).find(".pwd-strength").addClass("strong")
			// 	.find(".pwd-strength-detail").text(detail)
			// 	.parent().find(".pwd-strength-title").text(title);
			$(".data").verifyData( {
				"newPlungName": "input",
				"input-password": {
					"lengthRegExp": "^.{6,14}$",
					"regexp": "^[A-Z]|[a-z]|[0-9]|[`\\-=\\[\\];,\\.\\/~!@#\\$%\\^*\\(\\)_+\\}\\{:\\?]$",
					"spaceRegExp": "\\s"
				},
				"opNewMessage": function( root, newData, key, fn ) {
					var $rule = root[ newData ][ key ]
						opClass = function( result, tip ) {
							result ? $(tip).removeClass( "pwd-checklist-item-error" ).addClass("pwd-checklist-item-success") : $(tip).removeClass( "pwd-checklist-item-success" ).addClass("pwd-checklist-item-error") ;
						};
					if( $rule ) {
						var $result = fn.call( this, $rule ),
						$tip = this.parent().find( ".form-tip-password" ),
						$tips = $tip.find(".pwd-checklist-item");

						$tip.css({"display": "block"});
						if( key === "regexp" ) {
							opClass( $result, $tips[1] );
						} else if( key === "spaceRegExp" ) {
							opClass( $result, $tips[2] );
						} else {
							opClass( $result, $tips[0] );
						}
					}
				}
			} );
			$.fn.verifyData.extendRules( {
				"spaceRegExp": function( data ) {
					return !( new RegExp( data ).test( this.val() ) );
				},
				"lengthRegExp": function( data ) {
					return new RegExp( data ).test( this.val() );
				}
			} );
		} );
	</script>
	
</body>
</html>